code:
<header>
<h1>Theme Toggle Example</h1>
<div id="theme-controls">
<button data-set-theme="light">Light Mode</button>
<button data-set-theme="dark" >Dark Mode</button>
</div>
</header>
<main>
<section>
<h2>About Us</h2>
<p>Welcome to this toggle demo, which showcases light, and dark modes for better accessibility and user preferences.</p>
</section>
<section>
<h2>Contact Us</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter your username">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter a secure password">
<label for="age">Age:</label>
<input type="number" id="age" placeholder="Enter your age">
<label for="color">Favorite Color:</label>
<input type="color" id="color">
<label for="gender">Gender:</label>
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label>
<input type="checkbox" id="subscribe"> Subscribe to our newsletter
</label>
<button type="submit">Submit</button>
</form>
</section>
<section>
<h2>Services</h2>
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>SEO Optimization</li>
<li>Accessibility Improvements</li>
</ul>
</section>
<section>
<h2>Pricing Table</h2>
<table>
<thead>
<tr>
<th>Service</th>
<th>Basic</th>
<th>Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web Design</td>
<td>$500</td>
<td>$1000</td>
</tr>
<tr>
<td>Web Development</td>
<td>$1000</td>
<td>$2000</td>
</tr>
<tr>
<td>SEO Optimization</td>
<td>$300</td>
<td>$600</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>FAQs</h2>
<details>
<summary>What is this page about?</summary>
<p>This page demonstrates toggling between light, dark, and high contrast modes for better user experience.</p>
</details>
<details>
<summary>How do I use the theme toggles?</summary>
<p>Click on the buttons at the top of the page to change the theme.</p>
</details>
<details>
<summary>Is this page responsive?</summary>
<p>Yes! It adapts to various screen sizes and system preferences.</p>
</details>
</section>
</main>
<style>
:root {--background-color: light-dark(white, black); --text-color: light-dark(black, white);--form-bg: light-dark(#f0f0f0, #1e1e1e); --form-color: light-dark(black, white); --form-border: light-dark(#ccc, #555);
--button-bg: light-dark(#e0e0e0, #333); --button-text: light-dark(black, white);}
/* Themed Styles */
body {background-color: var(--background-color); color: var(--text-color); font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6;}
header {padding: 20px; text-align: center; color: var(--form-color); background-color: var(--form-bg);}
#theme-controls {display: flex; justify-content: center; gap: 10px;}
#theme-controls button {padding: 10px 20px; border: none; cursor: pointer; background-color: var(--button-bg); color: var(--button-text); border-radius: 5px; transition: background-color 0.3s, color 0.3s;}
#theme-controls button:hover {background-color: var(--text-color); color: var(--background-color);}
main {max-width: 1200px; margin: 0 auto; padding: 20px;}
section {margin-bottom: 30px;}
/* Light Mode */
[data-theme="light"] {color-scheme: light;}
/* Dark Mode - forcing this for the example, not advised to do this normally except you want to give your users the option to do so */
[data-theme="dark"] {color-scheme: dark;}
form {display: flex; flex-direction: column; gap: 15px; padding: 20px; background-color: var(--form-bg); border: 1px solid var(--form-border); border-radius: 8px;}
form label {font-weight: bold; color: var(--form-color);}
form input, form select, form button {padding: 10px; border: 1px solid var(--form-border); border-radius: 5px; font-size: 1rem;}
form button {background-color: var(--button-bg); color: var(--button-text); cursor: pointer;}
form button:hover {background-color: var(--text-color); color: var(--background-color);}
ul {padding: 0; list-style: none; }
ul li { padding: 5px 0;}
table {width: 100%; border-collapse: collapse; margin: 20px 0;}
table th, table td {border: 1px solid var(--form-border); padding: 10px; text-align: left;}
table th {background-color: var(--form-bg); font-weight: bold;}
details {margin: 10px 0;}
footer {text-align: center; padding: 10px; background-color: var(--form-bg); margin-top: 30px;}
/* Responsive Design */
@media (max-width: 768px) {
#theme-controls {flex-direction: column;}
form {padding: 10px;}
table th, table td {font-size: 0.9rem;}
}
@media (max-width: 30rem) {
header h1 {font-size: 1.5rem;}
#theme-controls button {padding: 8px 15px;}
form label, form input, form button {font-size: 0.9rem;}
}
</style>
<script>
const lightModeBtn = document.querySelector(`[data-set-theme='light']`);
const darkModeBtn = document.querySelector(`[data-set-theme='dark']`);
const html = document.documentElement;
const setTheme = (theme) => {
document.documentElement.removeAttribute('data-theme');
if (theme === 'dark') {
html.setAttribute('data-theme', 'dark');
}
localStorage.setItem('theme', theme);
};
const loadTheme = () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme);
}
};
lightModeBtn.addEventListener('click', () => setTheme('light'));
darkModeBtn.addEventListener('click', () => setTheme('dark'));
loadTheme();
</script>